<template>
  <div>
    <el-row>
      <el-col :span="1" style="margin: 0px 0px 0px 10% ">
        <img src="../img/star.png" width="40" height="40">
      </el-col>
      <h2 style="font-size: 30px;margin: 0px 0px">我的收藏</h2>
    </el-row>
    <el-divider></el-divider>

    <div class="content" v-if="stars.length>0">
    <el-row style="margin: 20px 0px 0px 170px;">
      <el-col :span="4" v-for="item in stars" :key ="item.id" class="card" :model="searchForm">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <img :src="item.imghref" class="image">
          <div style="padding: 14px">
            <span>{{item.goodname}}</span>
            <br>
            <div class="bottom clearfix" >
              <span style="color: red;font-size: 30px">￥{{item.price}}</span>
              <el-button type="text" class="button"  @click="del(item.id)">删除</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

    <div v-else class="cart-empty">
      <el-empty description=" ">
        <h2>您的收藏是空的，快去购物吧</h2>
      </el-empty>
    </div>


  </div>

</template>

<script>
import starApi from "@/http/starApi";

export default {
  name: "Star",
  created(){
    this.getList();
  },
  data(){
    return{
      stars:[],
      searchForm:{},
      pager: {
        pagerNum: 1,
        pageSize: 10
      }
    }
  },
  methods:{
    getList(){
      starApi.getListByPage().then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.pager = res.data.data
          this.stars = this.pager.data
        }
      })
    },
    handleSizeChange(val){
      this.pager.pageSize = val
      this.getList();
    },
    handleCurrentChange(val){
      this.pager.pageNum = val
      this.getList();
    },
    del(id){
      console.log(id);
      let result = confirm("确认删除商品吗");
      if (result){
        starApi.del(id).then(res => {
          if (res.data.code == 200){
            this.$message.success(res.data.msg);
            this.getList();
            console.log("1111")
          }
        })
      }
    },

  }
}
</script>

<style>
</style>